<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>websocket-java-socketio</title>
    <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
</head>
<body>
<h1>Socket.io Test</h1>
<div><p id="status">Waiting for input</p></div>
<div><p id="message">hello world!</p></div>
<button id="connect" onClick='connect()'/>Connect</button>
<button id="disconnect" onClick='disconnect()'>Disconnect</button>
<button id="send" onClick='send()'/>Send Message</button>

<button id="wb" onClick='wb()'/>wb 白板</button>

<button id="wbinfo" onClick='wbinfo()'/>wb 白板</button>

<button id="manualLogin" onClick='manualLogin()'/>手动登录</button>
</body>

<script type="text/javascript">

    /**
     * 前端js的 socket.emit("事件名","参数数据")方法，是触发后端自定义消息事件的时候使用的,
     * 前端js的 socket.on("事件名",匿名函数(服务器向客户端发送的数据))为监听服务器端的事件
     **/
    var socket = io.connect("http://127.0.0.1:7104?user=%7B%22realname%22%3A%22%E6%9D%A8%E5%B0%8F%E5%B0%8F%22%2C%22UserId%22%3A31%2C%22avatar%22%3A%22%2F%2Ff1.ykt100.com%2Fgroup1%2FM00%2F00%2F08%2FrBBYB1xLr2yAXlWKAACH9BKkxKo358.png%22%2C%22role%22%3A%22st%22%2C%22roomName%22%3A%22jzjyy761%22%2C%22groupName%22%3A1%2C%22deviceType%22%3A%22%22%7D&EIO=3&transport=websocket&sid=eaae982e-78e8-4c46-b9fb-c195bdf66bc2");
    var firstconnect = true;

    function connect() {
        if(firstconnect) {

            //socket.on('reconnect', function(){ status_update("Reconnected to Server"); });
            //socket.on('reconnecting', function( nextRetry ){ status_update("Reconnecting in "
            //+ nextRetry + " seconds"); });
            //socket.on('reconnect_failed', function(){ message("Reconnect Failed"); });
            //firstconnect = false;
        } else {
            socket.socket.reconnect();
        }
    }

    //监听服务器连接事件
    socket.on('connect', function(){ status_update("Connected to Server"); });
    //监听服务器关闭服务事件
    socket.on('disconnect', function(){ status_update("Disconnected from Server"); });
    //监听服务器端发送消息事件
    socket.on('messageevent', function(data) {
        message(data)
        //console.log("服务器发送的消息是："+data);
    });

    //断开连接
    function disconnect() {
        socket.disconnect();
    }

    function message(data) {
        document.getElementById('message').innerHTML = "Server says: " + data;
    }

    function status_update(txt){
        document.getElementById('status').innerHTML = txt;
    }

    function esc(msg){
        return msg.replace(/</g, '<').replace(/>/g, '>');
    }
    //点击发送消息触发
    function send() {
        console.log("点击了发送消息，开始向服务器发送消息")
        var msg = "我很好的,是的．";
        socket.emit('sendMsg', "你好");
    };

	function wb() {
        console.log("点击了发送消息，开始向服务器发送消息")
        var msg = "我很好的,是的．";
		socket.emit('wb',{"action":"onmouseup","bold":false,"italic":false,"type":"pen","fill":false,"fillColor":"#E52C3C","polyLine":3,"lineWidth":32,"color":"#FFFFFF","dashLine":false,"fontSize":36,"time":711499483,"path":[[467,1160],[447,1160]],"position":{"x":467,"y":1160,"x1":447,"y1":1160},"pptId":5150,"slide":7});
    };

	function wbinfo() {
        console.log("点击了发送消息，开始向服务器发送消息")
        var msg = "我很好的,是的．";
		socket.emit('wb-info',{"type":"getCurrentPage","value":[]});
    };

    function manualLogin() {
      console.log("点击了发送消息，开始向服务器发送消息")
      var msg = "我很好的,是的．";
      socket.emit('manualLogin',{});
    };
</script>
</html>
